<!DOCTYPE html>
<html>
<head>
  <title>网址书签</title>
</head>
<body>

<h1>网址书签</h1>

<!-- 登录表单 -->
<form id="login-form">
  <label for="password">管理员密码：</label>
  <input type="password" id="password" name="password">
  <button type="submit">登录</button>
</form>

<!-- 添加书签表单 -->
<form id="bookmark-form" style="display: none;">
  <label for="url">URL：</label>
  <input type="text" id= "url" name= "url">
  
   <!-- 添加其他需要的字段（例如标题、描述等）-->
  
  <button type= "submit">添加书签</button>
</form>

<!-- 显示已有书签列表 -->
<ul id= "bookmark-list"></ul>


<script>

// 假设这里存储了一些初始的书签数据
var bookmarks = [
    { url: 'https://www.example.com', title: 'Example' },
    { url: 'https://www.google.com', title: 'Google' }
];

var passwordInput = document.getElementById('password');
var loginForm = document.getElementById('login-form');
var bookmarkForm = document.getElementById('bookmark-form');
var bookmarkList = document.getElementById('bookmark-list');

loginForm.addEventListener('submit', function(event) {
    event.preventDefault();
    
    var password = passwordInput.value;
    
    // 在这里进行管理员密码验证逻辑
    if (password === 'your-password') {
        loginForm.style.display = 'none';
        bookmarkForm.style.display = 'block';
        renderBookmarks();
    } else {
        alert('密码错误！');
    }
});

bookmarkForm.addEventListener('submit', function(event) {
    event.preventDefault();
    
    var urlInput = document.getElementById('url');
    
    // 在这里获取其他字段的输入值
    
    var newBookmark = { url: urlInput.value };
  
  	// 将新书签添加到书签列表
  	bookmarks.push(newBookmark);
  	
  	// 清空表单输入框
  	urlInput.value = '';
  
  	renderBookmarks(); // 更新显示书签列表
});

function renderBookmarks() {
  bookmarkList.innerHTML = ''; // 清空已有的书签列表
  
  bookmarks.forEach(function(bookmark) {
      var liElement = document.createElement('li');
      var aElement = document.createElement('a');
      
      aElement.href=bookmark.url;
      aElement.textContent=bookmark.title || bookmark.url;
      
      liElement.appendChild(aElement);
      
  	  bookmarkList.appendChild(liElement);
  });
}

</script>

</body>
</html>
